<template>
  <div class="page-index">
    <div class="content">
      <img class="logo" src="../../assets/logo.png" />
      <div class="title">{{ title }}</div>
      <button class="download-btn" @click="getUrl">立即下载</button>
    </div>
    <div class="wxtip" v-if="isWeixin">
      <img class="wxtip-icon" src="../../assets/tip.png" alt="">
      <div class="wxtip-txt">请点击右上角选择在浏览器中打开</div>
    </div>
  </div>
</template>
<script>
import { getSn } from '../../api/index'
import { getSn } from '../../api/aes'
export default {
  data() {
    return {
      title: '社科通IOS',
      isWeixin: false
    }
  },
  mounted() {
    this.getUrl()
  },
  methods: {
    checkIOS() {
      const ua = navigator.userAgent.toLowerCase()
      const isIOS = ua.indexOf('iphone') !== -1 || ua.indexOf('ipad') !== -1
      return isIOS
    },
    async getUrl() {
      const isIOS = this.checkIOS()
      if (!isIOS) {
        alert('请在iOS设备上打开此页面')
        return
      }
      try {
        const res = await getSn()
        window.location = res.url
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style>
.page-index {
  height: 100vh;
  background-image: url(../../assets/bg.png);
  background-size: 100% 100%;
}
.content {
  padding-top: 90px;
  text-align: center;
}

.logo {
  height: 100px;
  width: 100px;
  margin-top: 100px;
  margin-bottom: 25px;
}

.title {
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 25px;
}

.download-btn {
  border: none;
  width: 244px;
  height: 40px;
  font-size: 18px;
  font-weight: 500;
  color: #b70e18;
  background: #fff;
  border-radius: 8px;
}

.wxtip {
  background: rgba(0, 0, 0, .8);
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
}

.wxtip-icon {
  width: 150px;
  height: 220px;
  position: absolute;
  right: 20px;
  top: 20px;
}

.wxtip-txt {
  margin-top: 300px;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}
</style>
